<!-- 我的主页 -->
<template>
  <view class="content" id="app">
    <Header desc="Me" page-name="我" />
    <view class="grid" :style="{ 'min-height': `calc(100vh - ${height + 20}px)` }">
      <!-- 用户信息 -->
      <UserInfo :is-login="isLogin" @openPage="openPage" :user-data="userData" />
      <!-- 列表 -->
      <view class="menus border-top">
        <view
          class="menus_cell d-flex border-bottom"
          v-for="item in (verStaff && isLogin ? list : list.slice(0,3) )"
          :key="item.es_name"
          @click="openPage(item.path,true)"
        >
          <text class="siyuan-medium">{{ item.name }}</text>
          <text class="intel-one-mono-medium">{{ item.es_name }}</text>
        </view>
      </view>
    </view>
    <FooterBar :tab-index="2" />
  </view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { onMounted, ref } from "vue";
import Header from "@/components/Header/HomeHeader.vue";
import FooterBar from "@/components/FooterBar/index.vue";
import UserInfo from "./components/UserInfo.vue";
import { getMemberCenterInfo } from "@/server/api.js";
import { openPage } from "@/util/index.js"

import { useStore } from "vuex";
const store = useStore();
let isLogin = ref(getApp().globalData.isLogin);
let userData = ref({});
let verStaff = ref(0);
let height = ref(store.state.headerHeight);
let list = ref([
  {
    name: "历史订单",
    es_name: "History",
    path: "/pages/personal/history",
  },
  {
    name: "关于我们",
    es_name: "About",
    path: "/pages/personal/about",
  },
  {
    name: "个人信息",
    es_name: "Information",
    path: "/pages/personal/information",
  },
  {
    name: "订单核销",
    es_name: "Checking",
    path: "/pages/personal/check",
  },
]);


let queryInfo = () => {
	verStaff.value = uni.getStorageSync('verStaff');
  if (store.state.userToken) {
    isLogin.value = true;
    getMemberCenterInfo().then(res => {
		userData.value = res.data;
    });
  } else {
    isLogin.value = false;
    userData.value = {};
  }
};
onMounted(() => {
  queryInfo();
});
onShow(() => {
  queryInfo();
});
</script>

<style lang="scss" scoped>
#app.content {
  padding-bottom: 0px;
}
.menus {
  margin-top: 140rpx;
  padding-bottom: 200px;
  background-color: #ffffff;
  &_cell {
    height: 100rpx;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    text {
      flex: 1;
    }
    text:first-child {
      padding-right: 26rpx;
      text-align: right;
    }
    text:first-child + text {
      padding-left: 26rpx;
      text-align: left;
    }
  }
}
</style>
